<ScrollView sdkExampleTitle sdkToggleNavButton>
	<StackLayout class="form">
		<StackLayout class="input-field">
			<Label class="label" text="Focused  TextField" textWrap="true"></Label>
			<TextField class="input input-border" (loaded)="firstTfLoaded($event)" hint="Focused TextField" text=""></TextField>
		</StackLayout>
		<StackLayout class="input-field">
			<Label class="label" text="Autocapitalization" textWrap="true"></Label>
			<TextField class="input input-border" #stf hint="allCharacters" autocorrect="false" text="" autocapitalizationType="allCharacters"></TextField>
			<TextField class="input input-border" #stf hint="none" autocorrect="false" text="" autocapitalizationType="none"></TextField>
			<TextField class="input input-border" #stf hint="sentences" autocorrect="false" text="" autocapitalizationType="sentences"></TextField>
			<TextField class="input input-border" #stf hint="words" autocorrect="false" text="" autocapitalizationType="words"></TextField>
		</StackLayout>
		<StackLayout class="input-field">
			<Label class="label" text="Passwords field" row="6" col="0" textWrap="true"></Label>
			<TextField class="input input-border" hint="Default" autocorrect="false" secure="true" text="" returnKeyType="next"></TextField>
			<TextField class="input input-border" hint="With text color" hintColor="#cc0000" color="#cc0000" autocorrect="false" secure="true"
			 text="" returnKeyType="next"></TextField>
		</StackLayout>
		<StackLayout class="input-field">
			<Label class="label" text="Keyboard types" row="8" col="0" textWrap="true"></Label>
			<TextField class="input input-border" autocorrect="false" hint="done" text="" returnKeyType="done"></TextField>
			<TextField class="input input-border" autocorrect="false" hint="go" text="" returnKeyType="go"></TextField>
			<TextField class="input input-border" autocorrect="false" hint="next" text="" returnKeyType="next"></TextField>
			<TextField class="input input-border" autocorrect="false" hint="search" text="" returnKeyType="search"></TextField>
			<TextField class="input input-border" autocorrect="false" hint="send" text="" returnKeyType="send"></TextField>
		</StackLayout>
		<StackLayout class="input-field">
			<Label class="label" text="Auto-correct" row="13" col="0" textWrap="true"></Label>
			<TextField class="input input-border" autocorrect="true" hint="With auto-correct" text="" returnKeyType="next"></TextField>
			<TextField class="input input-border" autocorrect="false" hint="Without auto-correct" text="" returnKeyType="next"></TextField>
		</StackLayout>
		<StackLayout class="input-field">
			<Label class="label" text="Setting Max text length(max 3 characters)" textWrap="true"></Label>
			<TextField class="input input-border" maxLength="3" hint="With maxLength" text="" returnKeyType="done"></TextField>
			<Label class="label" text="Setting Max text length(max 3 characters) with secure='true'" textWrap="true"></Label>
			<TextField class="input input-border" maxLength="3" hint="maxLength with secure='true'" text="" secure="true" returnKeyType="done"></TextField>
		</StackLayout>
		<StackLayout class="input-field">
			<Label class="label" text="Colors and Border style" row="15" col="0" textWrap="true"></Label>
			<TextField class="input input-border" autocorrect="false" hint="Default hint color" text="" returnKeyType="next"></TextField>
			<TextField class="input input-border" autocorrect="false" style.placeholderColor="#0066cc" hint="Hint text color" text=""
			 returnKeyType="next"></TextField>
			<TextField class="input input-border" autocorrect="false" hint="Default hint color" text="Default text color" returnKeyType="next"></TextField>
			<TextField class="input input-border" autocorrect="false" hint=" Blue Text Color" color="#0066cc" text="Text color" returnKeyType="next"></TextField>
			<TextField class="input" autocorrect="false" hint="Set Border Width" text="Set Border Width" borderWidth="5" borderColor="#6666ff"
			 returnKeyType="next"></TextField>
			<TextField class="input" autocorrect="false" hint="Green Border Color" text="Green Border Color" borderWidth="2" borderColor="#339933"
			 returnKeyType="next"></TextField>
			<TextField class="input" autocorrect="false" hint="Set Border Radius" text="Set Border Radius" borderWidth="2" borderRadius="40"
			 borderColor="#6666ff" returnKeyType="next"></TextField>
		</StackLayout>
		<StackLayout class="input-field">
			<Label class="label" text="TextAlignment" row="22" col="0" textWrap="true"></Label>
			<TextField class="input input-border" autocorrect="false" hint="left" text="left" textAlignment="left" returnKeyType="next"></TextField>
			<TextField class="input input-border" autocorrect="false" hint="center" text="center" textAlignment="center" returnKeyType="next"></TextField>
			<TextField class="input input-border" autocorrect="false" hint="right" text="right" textAlignment="right" returnKeyType="next"></TextField>
		</StackLayout>
		<StackLayout class="input-field">
			<Label class="label" text="FontSize" textWrap="true"></Label>
			<TextField class="input input-border" autocorrect="false" hint="Set FontSize" text="" fontSize="27" returnKeyType="next"></TextField>
		</StackLayout>
		<StackLayout class="input-field">
			<Label class="label" text="FontFamily" row="26" col="0" textWrap="true"></Label>
			<TextField autocorrect="false" fontFamily="serif" hint="serif" text="serif" class="input input-border" returnKeyType="next"></TextField>
			<TextField autocorrect="false" fontFamily="sans-serif" hint="sans-serif" text="sans-serif" class="input input-border" returnKeyType="next"></TextField>
			<TextField autocorrect="false" fontFamily="monospace" hint="monospace" text="monospace" class="input input-border" returnKeyType="next"></TextField>
		</StackLayout>
		<StackLayout class="input-field">
			<Label class="label" text="Date" textWrap="true"></Label>
			<!-- >> sample-ui-textfield-html -->
			<TextField hint="Enter date" 
					   [text]='birthDate | date:"MM/dd/yy"' 
					   secure="false"
					   keyboardType="datetime"
					   returnKeyType="done" 
					   (returnPress)="onReturnPress($event)"
					   autocorrect="false"
					   maxLength="10"
					   (focus)="onFocus($event)" 
					   (blur)="onBlur($event)" 
					   class="input input-border"></TextField>
			<!-- << sample-ui-textfield-html -->
		</StackLayout>
	</StackLayout>
</ScrollView>